<template>
  <div class="templatetable-container">
    <div style="padding: 12px">
      <!-- :disabled="!(state.selectedData && state.selectedData?.length > 0)" -->
      <el-button
        style="margin-right: 12px"
        type="primary"
        @click="openBatchPrint()"
      >
        批量打印
      </el-button>

      打印模板
      <el-select v-model="state.printTemplateCode">
        <el-option
          v-for="item in state.mbList"
          :key="item.printTemplateCode"
          :label="item.printTemplateName"
          :value="item.printTemplateCode"
        />
      </el-select>
    </div>
    <el-table
      ref="printerTable"
      :data="showData"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="序号" type="index" width="80px" />
      <el-table-column label="物料编码" min-width="50" prop="invcode" />
      <el-table-column label="物料规格" min-width="50" prop="invspec" />
      <el-table-column label="批次号" min-width="50" prop="invbatch" />
      <el-table-column label="数量" min-width="50" prop="qty" />
      <el-table-column label="条码" min-width="50" prop="barcode" />
      <el-table-column label="备注" min-width="50" prop="remark" />
      <el-table-column align="left" label="操作">
        <template #default="scope">
          <el-button link type="primary" @click="openPrint([scope.row])">
            打印
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  import { useUserStore } from '@/store/modules/user'
  import { queryTemp } from '@/api/print/index.js'
  import { localStorageConfig } from '@/config/localstorage.config'
  import hiPrint from '@/utils/hiPrint.js'
  const printerTable = ref(),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const state = reactive({
    printTemplateCode: 'bar_001',
    mbList: [],
    printList: [{ mIndex: 0, barcode: 'test' }],
    selectedData: [],
    toPrintIndexs: [],
  })

  const showData = computed(() => {
    return state.printList.filter((item) => {
      return !(state.toPrintIndexs.indexOf(item.mIndex) >= 0)
    })
  })

  const { getUserInfo } = useUserStore()
  const _userInfo = getUserInfo()
  let ws = null
  const opWebscoket = () => {
    const wsAdress = `ws://192.168.14.130:11083/print_socket/${_userInfo.userid}`
    ws = new WebSocket(wsAdress)
    ws.onopen = (e) => {
      console.log('onopen', e)
    }
    ws.onmessage = function (e) {
      console.log(e)
      if (e && e.data && JSON.parse(e.data).barcode) {
        state.printList.push({
          ...JSON.parse(e.data),
          mIndex: state.printList.length,
        })
      }
    }
    ws.onerror = (e) => {
      console.log('onerror', e)

      //
    }
    ws.onclose = (e) => {
      console.log('onclose', e)
      //
    }
    setInterval(() => {
      ws.send(
        JSON.stringify({
          date: '2024-12-22 11:19:35',
          text: 'admin',
          to: '0',
        })
      )
    }, 3000)
  }
  const handleSelectionChange = (vals) => {
    state.selectedData = vals
  }
  const openPrint = (dataList) => {
    toPrint(dataList)
  }
  const openBatchPrint = () => {
    toPrint(state.selectedData)
    printerTable.value.clearSelection()
    state.selectedData = []
  }
  const toPrint = (data) => {
    if (!data || data.length === 0) return
    state.toPrintIndexs = state.toPrintIndexs.concat(
      data.map((item) => item.mIndex)
    )
    hiPrint(state.printTemplateCode, [...data])
  }
  const queryTempList = async () => {
    const param = {
      pageNum: 1,
      pageSize: 1000,
      printTemplateCode: '',
      printTemplateName: '',
      isUse: 0,
      pkCorp,
    }
    const { data = {} } = await queryTemp(param)
    state.mbList = (data?.list || []).map((item) => {
      item['printTemplateCode'] = item.printTemplateCode?.trim()
      return item
    })
  }

  onMounted(async () => {
    queryTempList()
    opWebscoket()
  })
  onUnmounted(() => {})
</script>
